﻿@model List<Knowledge>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知识点管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


    <!--展示数据的主窗口-->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        知识点列表
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>知识点名称</th>
                                    <th>描述</th>
                                    <th>创建时间</th>
                                    <th>创建的老师</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var point in Model)
                                {
                                    <tr data-row-id="@point.pk_id">
                                        <td>@point.pk_name</td>
                                        <td>@point.course_desc</td>
                                        <td>@point.created_time</td>
                                        <td>@point.teacher_id</td>
                                        <td>
                                            <button id="edit-@point.pk_id" class="btn btn-warning edit-btn" data-id="@point.pk_id">修改</button>
                                            <button id="delete-@point.pk_id"  class="btn btn-danger delete-btn" data-id="@point.pk_id">删除</button>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                        <!-- Bootstrap 分页组件 -->
                        <nav aria-label="Page navigation example">
                           <ul class="pagination justify-content-center">
                               <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                              <li class="page-item"><a class="page-link" href="#">1</a></li>
                              <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                          </ul>
                       </nav>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑知识的模态窗口 -->
    <div class="modal fade" id="editKnowledgeModal" tabindex="-1" role="dialog" aria-labelledby="editKnowledgeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="editKnowledgeModalLabel">编辑知识点</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editKnowledgeForm">
                        <input type="hidden" id="knowledgeId" name="pk_id">
                        <div class="form-group">
                            <label for="editKnowledgePointName">知识点名称</label>
                            <input type="text" class="form-control" id="editKnowledgePointName" placeholder="请输入知识点名称" name="pk_name" required>
                        </div>
                        <div class="form-group">
                            <label for="editKnowledgePointDescription">知识点描述</label>
                            <textarea class="form-control" id="editKnowledgePointDescription" rows="14" placeholder="请输入知识点描述" name="course_desc" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelEdit">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmEdit">确定</button>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!--使用jquery和ajax动态删除知识点的脚本-->
<script>
    $(document).ready(function () {
        $('.delete-btn').click(function (e) {
            e.preventDefault();

            let confirmation = confirm("确定要删除这个知识点吗?");
            if (confirmation) {
                let btn = $(this);
                let id = btn.data('id'); // 使用jQuery获取data-id属性的值

                $.ajax({
                    url: '/knowledge/KnowledgeDelete',
                    method: 'POST',
                    data: { id: id },
                    success: function (data) {
                        if (data.success) {
                            // 使用jQuery选择并移除对应的表格行
                            btn.closest('tr').remove();
                        } else {
                            alert('删除失败!');
                        }
                    },
                    error: function () {
                        alert('服务器出错！');
                    }
                });
            }
        });
    });
  </script>

<!--模态窗口的脚本-->
<script>
    $(document).ready(function () {
        // 当点击编辑按钮时
        $('.edit-btn').click(function () {
            const id = $(this).data('id');
            const pkName = $(this).closest('tr').find('td:eq(0)').text();
            const courseDesc = $(this).closest('tr').find('td:eq(1)').text();

            // 填充模态窗口表单
            $('#knowledgeId').val(id);
            $('#editKnowledgePointName').val(pkName);
            $('#editKnowledgePointDescription').val(courseDesc);

            // 显示模态窗口
            $('#editKnowledgeModal').modal('show');
        });

        // 当点击模态窗口的确定按钮时
        $('#confirmEdit').click(function () {
            // 使用 AJAX 发送数据到服务器
            $.ajax({
                url: '/knowledge/ReviseKnowledge',
                method: 'POST',
                data: $('#editKnowledgeForm').serialize(),
                success: function (data) {
                    if (data.success) {
                        alert('修改成功!');
                        location.reload(); //或者更新表格中的相关行，而不是重新加载页面
                    } else {
                        alert('修改失败!');
                    }
                },
                error: function () {
                    alert('服务器出错！');
                }
            });

            // 关闭模态窗口
            $('#editKnowledgeModal').modal('hide');
        });
    });

</script>

<!--模态窗口退出关闭的处理脚本-->
<script>
    $(document).ready(function () {
        // 清除表单数据的函数
        function clearFormData() {
            $('#editKnowledgeForm')[0].reset();  // 重置表单
            $('#knowledgeId').val('');           // 清空隐藏输入框的值
        }

        // 当模态窗口完全隐藏后
        $('#editKnowledgeModal').on('hidden.bs.modal', function () {
            clearFormData();
        });

        // 如果您有一个取消按钮，您可以这样绑定它来关闭模态窗口并清除数据
        $('#cancelEdit').click(function () {
            $('#editKnowledgeModal').modal('hide');  // 关闭模态窗口
            clearFormData();                        // 清除表单数据
        });
    });
</script>